<template>
	<view class="required-box">
		<view class="content-colot"></view>
			<view class="item_box" v-for="(item, index) in rowBox" :key="index">
				<view class="item_top">
					<text class="material-s">材料{{index + 1}}</text>
					<text class="top_reduce" @click="delColumn(index)">删除</text>
				</view>
				<view class="content required-form-Box">
					<u-form :model="item" ref="itemForm" :rules="rules" labelPosition="left" labelWidth="auto"
						class="form" :labelStyle="{fontSize: '32rpx', fontWeight: '600',color: '#445469'}">
						<u-form-item label="材料名称" borderBottom labelWidth="200rpx" @click="selectName(index)">
							<u--input v-model="item.processName" disabled disabledColor="#ffffff" inputAlign="right"
								placeholder="请选择材料名称" border="none">
							</u--input>
							<u-icon slot="right" name="arrow-right" color="#A7AEBD" size="20"></u-icon>
						</u-form-item>
						<u-form-item label="规格型号" borderBottom labelWidth="200rpx" @click="openConfirm(index)">
							<u--input v-model="item.model" disabled disabledColor="#ffffff" inputAlign="right"
								placeholder="请选择规格型号" border="none">
							</u--input>
							<u-icon slot="right" name="arrow-right" color="#A7AEBD" size="20"></u-icon>
						</u-form-item>
						<u-form-item label="消耗量" prop="shelfLife" borderBottom labelWidth="200rpx">
							<view class="required-form-item">*</view>
							<view class="value value-nav">
								<!-- #ifdef APP-PLUS || H5 -->
									<u--input type='number' :customStyle="{paddingRight: '50rpx'}" v-model="item.shelfLife"
										@input="item.shelfLife = item.shelfLife.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"	
										inputAlign="right" placeholder="请输入" border="none">
									</u--input>
								<!-- #endif -->
								<!-- #ifdef MP-WEIXIN -->
								<u--input type='digit' :customStyle="{paddingRight: '50rpx'}" v-model="item.shelfLife"
									@input="item.shelfLife = item.shelfLife.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')"	
									inputAlign="right" placeholder="请输入" border="none">
								</u--input>
								<!-- #endif -->
								<text class="day">{{item.unit}}</text>
							</view>
						</u-form-item>
					</u-form>
					<view class="main-content">

					</view>
				</view>
				<!-- 规格型号选择器 -->
				<view v-if="isShowName">
					<u-picker :show="isShowName" :ref="'uPicker'+index" :columns="modelList" keyName="model"
						@confirm="onModelSure($event,index)" @cancel="isShowName = false">
					</u-picker>
				</view>

			</view>
			<u-button type="primary" class="custom-style" icon="plus" :plain="true" text="添加材料明细" @click="addColumn">
			</u-button>

			<view class="bottom">

			</view>
		<!-- 测试 -->
		<level-linkage :ref="`levelLinkage`" title="材料名称" :pickerValueDefault="pickerValueDefault" :allData="treeData"
			@onConfirm="onConfirm" themeColor='#007AFF'>
		</level-linkage>
	</view>
</template>

<script>
	import levelLinkage from "@/components/three-level-linkage/linkage.nvue"
	import filterArray from "@/utils/filterArray.js"
	//工序列表
	import {
		deviceTypeGetListByNameByLike,
		getDeviceTypeAttributeList
	} from '@/api/comprehensive/comprehensive.js'
	export default {
		name: 'materialInformation',
		components: {
			levelLinkage
		},
		props: {
			material: {
				type: Array,
				default: []
			}

		},
		data() {
			return {
				pickerValueDefault: [0, 0],
				treeData: [],
				rules: {},
				modelList: [], //材料型号数据
				materList: [], //材料名称数据
				rowBox: [{
					processName: '', //材料名称
					model: '', //规格型号
					shelfLife: '', //消耗量
					unit: '',
					special: '', //唯一性
					count: 0
				}],
				isShowName: false,
			}
		},
		watch: {
			material(l) {
				this.mater()
			}
		},
		mounted() {
			// 获取材料数据
			this.getInterFaceData()
		},
		methods: {
			// 重新填报赋值
			mater() {
				if (this.material && this.material.length > 0) {
					console.log(this.material, '115行');
					let m = []
					m = this.material.map(it => ({
						processName: it.parentTypeName + '/' + it.deviceTypeName,
						model: it.deviceTypeAttributeName,
						deviceTypeName: it.specificationModel,
						shelfLife: it.num,
						unit: it.unit,
						special: it.special,
						materialId: it.deviceTypeAttributeId,
						count: 1,
						// pmprId:it.pmprId,
						special: it.parentTypeName + '/' + it.deviceTypeName + '-' + it
							.deviceTypeAttributeName,
						subDeviceTypeId: it.deviceTypeId
					}))
					m.isEdit = true,
						this.rowBox = m
					console.log(this.rowBox, 'sdfasd');
				}
			},
			//获取接口的材料数据
			async getInterFaceData() {
				let _para = {
					ex1: "material",
					name: ''
				}
				let data_resp = await deviceTypeGetListByNameByLike(_para)
				let sourceData = data_resp.result
				let tempID2 = sourceData.filter(item => item.treeLevel == 1)[0].id
				let temp2 = sourceData.filter(item => item.treeLevel !== 1)
				this.treeData = filterArray(temp2, tempID2)
				// console.log(this.treeData, '树形数据前端处理')
				// 获取规格型号数据
				let model_resp = await getDeviceTypeAttributeList({
					currPage: 1,
					pageSize: 10000,
					params: {}
				})
				this.sumList = model_resp.result.list
			},
			// 添加按钮事件
			addColumn() {
				// this.modelList = []
				console.log(this.rowBox, '3333')
				this.rowBox.push({
					processName: '', //材料名称
					model: '', //规格型号
					shelfLife: '', //消耗量
					unit: '', //单位
					special: '',
					count: 0,
				})

			},
			// 删除行按钮事件
			delColumn(index) {
				// this.delItemCancelDisabled(index);
				this.rowBox.splice(index, 1);
			},
			openConfirm(index) {
				this.itemIndex = index;
				// if (this.rowBox.isEdit) {
				this.modelList = [this.sumList.filter(item => item.subDeviceTypeId === this.rowBox[index]
					.subDeviceTypeId)]
				// }
				if (this.rowBox[index].processName === '') return uni.showToast({
					title: '请先选择材料名称!',
					icon: 'none'
				})
				this.isShowName = true
			},
			/**
			 * 选择器的确定按钮
			 * 这里组件内部val的id为下标,不是数据库内的id
			 * @param {Object} val 
			 */
			onConfirm(val) {
				// if(this.rowBox.isEdit) {
				this.rowBox[this.itemIndex].model = ''
				this.rowBox[this.itemIndex].shelfLife = ''
				this.rowBox[this.itemIndex].unit = ''
				// }
				let temp_id = val.secondPick.id
				this.modelList = [this.sumList.filter(item => item.subDeviceTypeId === temp_id)]
				console.log(this.modelList, '型号数组');
				this.rowBox[this.itemIndex].processName = val.name; //绑定在input上
				this.rowBox[this.itemIndex].subDeviceTypeId = val.secondPick.id;
				this.rowBox[this.itemIndex].count = 1
				// console.log(this.rowBox[this.itemIndex].count,'有没有添加进去');
			},
			//选择材料名称
			selectName(index) {
				this.itemIndex = index;
				this.$refs.levelLinkage.open();
			},
			// 规格型号确定事件
			onModelSure(obj, index) {
				console.log(obj, index, '规格选择器确定事件')
				// this.itemIndex = index;
				this.rowBox[this.itemIndex].model = obj.value[0].model
				this.rowBox[this.itemIndex].materialId = obj.value[0].id
				this.rowBox[this.itemIndex].unit = obj.value[0].unit
				this.rowBox[this.itemIndex].deviceTypeName = obj.value[0].name
				this.rowBox[this.itemIndex].special = this.rowBox[this.itemIndex].processName + '/' + this.rowBox[this
					.itemIndex].model
				console.log(this.rowBox, '表格数据')
				this.isShowName = false
			},
		}
	}
</script>

<style lang="scss" scoped>
	// 表单校验提示文字
	::v-deep.content .u-form .u-form-item .u-form-item__body__right__message {
		margin-left: 278rpx !important;
	}

	.required-box {
		background: #F5F7FA;
		height: 100vh;

		.item_box {
			margin: 0 32rpx;
			background: #ffffff;
		}

		.item_top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 20rpx;
			padding-top: 15rpx;
			padding-bottom: 20rpx;
			border-bottom: 2rpx solid #e5e5e5;

			.material-s {
				font-size: 36rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #445469;
			}

			.top_reduce {
				// cursor: pointer;
				color: #ffffff;
				width: 110rpx;
				height: 60rpx;
				background: #FF6A6A;
				text-align: center;
				line-height: 60rpx;

			}
		}

		.content {
			padding: 0 35rpx;

			.value {
				display: flex;
				align-items: center;
				justify-content: space-between;
			}

			.value-nav {
				position: relative;

				.day {
					position: absolute;
					top: 4rpx;
					right: -4rpx;
				}
			}

			.addArea {
				width: 100%;
				height: 96rpx;
				line-height: 96rpx;
				background: #F5F7FA;
				font-size: 32rpx;
				font-weight: bold;
				color: #445469;
				margin-top: 40rpx;
				text-align: center;
				margin-bottom: 40rpx;

				.image {
					width: 50rpx;
					height: 50rpx;
					margin-bottom: -13rpx;
				}
			}
		}

		.little_count {
			margin-top: 30rpx;
			text-align: right;
			padding-right: 20rpx;
		}

		.btn_box {
			height: 100rpx;

			.btn_group {
				display: flex;
				align-items: center;
				justify-content: space-between;
				// margin-top: 100rpx;
				position: fixed;
				bottom: 0;
				width: 100%;

			}
		}

		.content-colot {
			height: 10rpx;
			background: #F5F7FA;
		}

		.value2 {
			display: flex;
			align-items: center;
			text-align: right;

			.none {
				flex: 1;
			}

		}

		.value-nav {
			position: relative;

			.day {
				position: absolute;
				top: 10rpx;
				right: 0rpx;
			}
		}

		.footer {
			position: relative;
			width: 100%;

			// height: 100rpx;
			.image {
				position: absolute;
				bottom: 0rpx;
				right: 140rpx;
				width: 60rpx;
				height: 60rpx;
			}

			.select {
				position: absolute;
				bottom: 6rpx;
				right: 60rpx;
				font-size: 32rpx;
			}

			.num {
				position: absolute;
				bottom: 24rpx;
				right: 120rpx;
				padding: 5rpx 15rpx;
				border-radius: 30rpx;
				background-color: #f43530;
				color: #fff;
				z-index: 1;
			}
		}


		// .bottom{

		// 	height: 200rpx;
		// 	background: #F5F7FA;
		// }
		.main-content {
			height: 40rpx;
			background: #F5F7FA;
			margin: 0 -40rpx;
		}

		.custom-style {
			width: 90%;
			font-size: 32rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #2F80ED;
		}
	}

	/deep/ .u-form-item__body__right__content__slot {
		flex-direction: column;
	}

	/deep/ .define-block {
		display: block;
	}

	/deep/ .u-upload__wrap {
		width: 85%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		flex: 1;
	}
</style>